<template>
  <div class="publicformview">
    <el-form :rules='rules' label-width='100px' :inline="true" :disabled='blockType==3' :model="listQuery" size="mini" ref="addForm" style="margin-top: 20px;">
      <div class="publicformview-row">

        <el-form-item label="所号：" prop="blockno">
          <el-select v-model="listQuery.blockno" @change='blockChange' value-key="blockno" clearable>
            <div v-for="(item,index) in blList" :key="index">
              <el-option :label="item.blockno" :value="item" :key="index"></el-option>
            </div>
          </el-select>
					<el-tooltip class="item" effect="dark" content="首先要选择“所号”，自动根据Block表调入性质、起始日期、结构、地级" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
        <el-form-item label="编号：" prop="roomid">
          <el-input v-model="listQuery.roomid"></el-input>
					<!-- <el-tooltip class="item" effect="dark" content="" placement="top" style="margin-left:5px">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip> -->
        </el-form-item>
        <el-form-item label="建档单位：" prop="creatingdept">
          	<el-select v-model="listQuery.creatingdept" :disabled='isNodetile'>
							<div v-for="(item,index) in bumenList" :key="index">
								<el-option :label="item.aname" :value="item.aname" :key="index"></el-option>
							</div>
						</el-select>
          <!-- <el-input disabled v-model="listQuery.creatingdept"></el-input> -->
        </el-form-item>
        <el-form-item label="启始日期：" prop="startdate">
          <el-date-picker v-model="listQuery.startdate" type="date" placeholder="年/月/日">
          </el-date-picker>
        </el-form-item>
      </div>
      <div class="publicformview-row">

        <el-form-item label="门号：" prop="buildingdoorno">
          <el-input v-model="listQuery.buildingdoorno"></el-input>
        </el-form-item>
        <el-form-item label="楼层：" prop="floorno">
          <el-input v-model="listQuery.floorno"></el-input>
        </el-form-item>
        <el-form-item label="性质：" prop="livingway">
          <el-select v-model="listQuery.livingway" @change='xinzhiChange' clearable>
            <div v-for="(item,index) in xingzhiList" :key="index">
              <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
            </div>
          </el-select>
					<el-tooltip class="item" effect="dark" content="选择“住宅”或“非住宅”后，下方的“住宅租金”或“非住宅租金”页面要有变化" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
        <el-form-item label="启始原因：" prop="startcause">
          <el-select v-model="listQuery.startcause" clearable>
            <div v-for="(item,index) in qishiyuanyingList" :key="index">
              <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
            </div>
          </el-select>
        </el-form-item>
      </div>
      <div class="publicformview-row">

        <el-form-item label="单元：" prop="apartmentno">
          <el-input v-model="listQuery.apartmentno"></el-input>
        </el-form-item>
        <el-form-item label="间号：" prop="roomno">
          <el-input v-model="listQuery.roomno"></el-input>
        </el-form-item>
        <el-form-item label="计租：" prop="rentflag">
          <el-select v-model="listQuery.rentflag" clearable>
            <el-option label="是" :value="1" key="1"></el-option>
            <el-option label="否" :value="0" key="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自然间：" prop="roomflag">
          <el-select v-model="listQuery.roomflag" clearable>
            <el-option label="是" :value="1" key="1"></el-option>
            <el-option label="否" :value="0" key="0"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="publicformview-row">
        <el-form-item label="用途：" prop="use" v-if="listQuery.livingway=='住宅'">
          <el-select v-model="listQuery.use" clearable @change='ytuChange' value-key="classmid">
            <div v-for="(item,index) in yongtuList" :key="index">
              <el-option :label="item.classmid" :value="item" :key="index"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="类别：" prop="usetype" v-if="listQuery.livingway=='住宅'">
          <el-select v-model="listQuery.usetype" clearable>
            <div v-for="(item,index) in leibieList" :key="index">
              <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
            </div>
          </el-select>
        </el-form-item>
				<el-form-item label="用途：" prop="use" v-if="listQuery.livingway=='非住宅'">
				  <el-select v-model="listQuery.use" clearable @change='ytuChange' value-key="detail">
				    <div v-for="(item,index) in yongtuList" :key="index">
				      <el-option :label="item.detail" :value="item" :key="index"></el-option>
				    </div>
				  </el-select>
				</el-form-item>
				<el-form-item label="类别：" prop="usetype" v-if="listQuery.livingway=='非住宅'">
				  <el-select v-model="listQuery.usetype" clearable>
				    <div v-for="(item,index) in leibieList" :key="index">
				      <el-option :label="item.detail" :value="item.detail" :key="index"></el-option>
				    </div>
				  </el-select>
				</el-form-item>
        <el-form-item label="长*宽(米)：" prop="lenthWidth">
          <el-input v-model="listQuery.lenthWidth"></el-input>
        </el-form-item>
        <template v-if="blockType==3||blockType==2" :span="6">
          <el-form-item label="原值：" prop="oldvalue">
            <el-input disabled v-model="listQuery.oldvalue"></el-input>
          </el-form-item>
					<el-tooltip class="item" effect="dark" content="建筑面积 * “所”的单价" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </template>
      </div>
      <div class="publicformview-row">
        <el-form-item label="建筑面积：" prop="buildingarea">
          <el-input v-model="listQuery.buildingarea"></el-input>
					<el-tooltip class="item" effect="dark" content="使用面积 * “所”的分摊系数，“住宅”或“非住宅”要分别对应" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
        <el-form-item label="使用面积：" prop="usingarea">
          <el-input disabled v-model="listQuery.usingarea"></el-input>
					<el-tooltip class="item" effect="dark" content="根据“长*宽”公式计算，公式为四则运算，包括加+减-乘*除/括号（）等" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>
        <el-form-item label="计租面积：" prop="rentarea">
          <el-input v-model="listQuery.rentarea"></el-input>
					<el-tooltip class="item" effect="dark" content="如果是“住宅”，则为“使用面积”，如果是“非住宅”，则为“建筑面积”" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>

        <template v-if="blockType==3||blockType==2" :span="6">
          <el-form-item label="现值：" prop="nowvalue">
            <el-input disabled v-model="listQuery.nowvalue"></el-input>
          </el-form-item>
					<el-tooltip class="item" effect="dark" content="原值 * “所”的折旧率" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </template>
      </div>
      <div v-if="blockType==3||blockType==2" class="publicformview-row">
        <el-form-item label="终止日期：" prop="stopdate">
          <el-date-picker v-model="listQuery.stopdate" type="date" placeholder="年/月/日">
          </el-date-picker>
					<el-tooltip class="item" effect="dark" content="输入“终止日期”表示，该条纪录已经终止，即在统计时，减少一间。否则，“终止日期”保持为NULL值" placement="top">
								<i class="el-icon-warning" style="margin-left:5px"></i>
					</el-tooltip>
        </el-form-item>

        <el-form-item label="终止原因：" prop="stopcause">
          <el-select v-model="listQuery.stopcause" clearable>
            <div v-for="(item,index) in zhongzhiyuanyingList" :key="index">
              <el-option :label="item.classmid" :value="item.classmid" :key="index"></el-option>
            </div>
          </el-select>
        </el-form-item>
        <el-form-item label="变动日期：" prop="changedate">
          <el-date-picker v-model="listQuery.changedate" type="date" placeholder="年/月/日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="变动原因：" prop="changetype">
          <el-input v-model="listQuery.changetype"></el-input>
        </el-form-item>
      </div>
      <div class="publicformview-row">
        <el-form-item label="成套：" prop="singleuseflag">
          <el-input disabled v-model="listQuery.singleuseflag"></el-input>
        </el-form-item>
        <el-form-item label="备注：" prop="roommemo1">
          <el-input type="textarea" :rows="2" v-model="listQuery.roommemo1" style="width: 300px"></el-input>
        </el-form-item>
      </div>
    </el-form>
    <div class="bottomTop" v-if="blockType!=3">
      <el-button type="primary" size="mini" @click="handleAddUser">保存</el-button>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import {
  houseAdminList,
  addRoom,
  roomDetails,
  updRoom,
  blockList,
  blockDetail
} from '@/api/industry'
export default {
  props: {
    blockType: String,
    roomid: String
  },
  name: 'canquanqingkuang',
  data() {
    return {
      listQuery: {
        blockno: '',
        roomid: '',
        creatingdept: '',
        startdate: '',
        buildingdoorno: '',
        floorno: '',
        livingway: '',
        startcause: '',
        apartmentno: '',
        rentflag: '',
        usetype: '',
        stopdate: '',
        roomno: '',
        roomflag: '',
        stopcause: '',
        changedate: '',
        changetype: '',
        lenthWidth: '',
        buildingarea: '',
        rentarea: '',
        usingarea: '',
        oldvalue: '',
        nowvalue: '',
        use: '',
        roommemo1: '',
				singleuseflag:'非成套'
      },
      rules: {
        buildingarea: [
          {
            required: true,
            message: '请输入建筑面积',
            trigger: 'blur'
          }
        ],
        rentarea: [
          {
            required: true,
            message: '请输入计租面积',
            trigger: 'blur'
          }
        ],
        usingarea: [
          {
            required: true,
            message: '请输入使用面积',
            trigger: 'blur'
          }
        ],
        blockno: [
          {
            required: true,
            message: '请输入所号',
            trigger: 'blur'
          }
        ],
        creatingdept: [
          {
            required: true,
            message: '请选择建档单位',
            trigger: 'blur'
          }
        ]
      },
      total: 0,
      options: [
        {
          key: '1'
        }
      ],
      listLoading: false,
      dialogVisible: false,
      isChanquan: true,
      type: 1,
      // 部门列表
      bumenList: [],
      // 性质
      xingzhiList: [],
      chanyeList: [],
      blList: [],
      qishiyuanyingList: [],
      yongtuList: [],
      zhongzhiyuanyingList: [],
      leibieList: [],
      blockid: '',
			isNodetile:false
    }
  },
  computed: {},
	watch: {
	  'listQuery.usingarea': {
	    handler(newVal, oldVal) {
	      if (this.listQuery.livingway == '住宅') {
					this.listQuery.rentarea = newVal
	      } 
	    }
	  },
		'listQuery.buildingarea': {
			handler(newVal, oldVal) {
				if (this.listQuery.livingway == '非住宅') {
					this.listQuery.rentarea = newVal
				} 
			}
		},
		'listQuery.livingway': {
			handler(newVal, oldVal) {
				if (newVal == '住宅') {
					if(this.listQuery.usingarea){
						this.listQuery.rentarea = this.listQuery.usingarea
					}
					
					this.chanyeList.forEach((item, index) => {
					  if (item.classname == '房间资料用途') {
					    this.yongtuList = item.classmidList
					  } else if (item.classname == '住宅') {
							this.leibieList = item.classmidList
						}
					})
				} else{
					if(this.listQuery.buildingarea){
						this.listQuery.rentarea = this.listQuery.buildingarea
					}
					
					this.chanyeList.forEach((item, index) => {
					  if (item.classname == '非住宅') {
					    this.yongtuList = item.classmidList[0].classdetailList
					    this.leibieList = item.classmidList[1].classdetailList
					  }
					})
				}
			}
		},
		'listQuery.lenthWidth':{
			handler(newVal, oldVal) {
				console.log(newVal.split('*'))
				let arrNum = newVal.split('*')
				let arr1 = arrNum['0']
				let arr2 = arrNum['1']
				if(arr2){
					this.listQuery.usingarea = parseInt(arr1)*parseInt(arr2)
					if(this.listQuery.rentarea == 1){
							let number = JSON.stringify(this.listQuery.usingarea)
							this.listQuery.rentarea = JSON.parse(number)
					}
				}
			}
		},
		'listQuery.rentflag':{
			handler(newVal, oldVal) {
				if(newVal==0){
						this.listQuery.rentarea = 0
				}else if(newVal==1){
					let number = JSON.stringify(this.listQuery.usingarea)
					this.listQuery.rentarea = JSON.parse(number)
				}
			}
		}
	},
  mounted() {
    // 遍历字典
    this.chanyeList = JSON.parse(localStorage.getItem('chanye'))
    this.chanyeList.forEach((item, index) => {
      if (item.classname == '地段等级') {
        this.xingzhiList = item.classmidList
      } else if (item.classname == '房间资料起始原因') {
        this.qishiyuanyingList = item.classmidList
      } else if (item.classname == '房间资料用途') {
        this.yongtuList = item.classmidList
      } else if (item.classname == '房间资料终止原因') {
        this.zhongzhiyuanyingList = item.classmidList
      } else if (item.classname == '住宅') {
        this.leibieList = item.classmidList
      }
    })

    if (this.roomid) {
      let data = {
        RoomID: this.roomid
      }
      roomDetails(data).then((res) => {
        this.listQuery = res.data
        this.xinzhiChange(res.data.livingway)

        let data = {
          limit: 99999,
          page: 1
        }
        blockList(data).then((res) => {
          res.data.list.forEach((item, index) => {
            if (item.blockno == this.listQuery.blockno) {
              let data = {
                BlockID: item.blockid
              }
              blockDetail(data).then((res) => {
                this.listQuery.creatingdept = res.data.creatingdept
                this.$forceUpdate()
              })
            }
          })
        })
      })
    }
    this.houseAdminList()
    this.blockList()
    if (localStorage.getItem('jibenxinxi')) {
      this.listQuery = JSON.parse(localStorage.getItem('jibenxinxi'))
      this.xinzhiChange(this.listQuery.livingway)
    }
		
		if(localStorage.getItem('userHouseAdminId')>0){
			this.listQuery.creatingdept = localStorage.getItem('userHouseAdminName')
			this.isNodetile = true
		}
  },

  methods: {
		ytuChange(e){
			console.log(e,this.listQuery.livingway)
			if(this.listQuery.livingway=='住宅'){
				this.listQuery.use = e.classmid
				this.listQuery.usetype = e.classdetailList[0].detail
				this.listQuery.rentflag = e.classdetailList[1].detail=='否'?0:1
				this.listQuery.roomflag = e.classdetailList[2].detail=='否'?0:1
			}else{
				
			}
			
		},
    xinzhiChange(e) {
      this.$emit('xinzhi', e)
    },
    blockList() {
      let data = {
        limit: 99999,
        page: 1
      }
      blockList(data).then((res) => {
        this.blList = res.data.list
      })
    },
    // 部门列表
    houseAdminList() {
      let data = {
        AName: '',
        DID: '',
        pageSize: 9999,
        pageNum: ''
      }
      this.listLoading = true
      houseAdminList(data).then((res) => {
        this.bumenList = res.data.list
        this.listLoading = false
      })
    },
    resetForm(val) {
      this.$refs[val].resetFields()
    },
    handleAddUser() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          let data = {
            blockno: this.listQuery.blockno,
            roomid: this.listQuery.roomid,
            creatingdept: this.listQuery.creatingdept,
            startdate: this.listQuery.startdate
              ? dayjs(this.listQuery.startdate).format('YYYY-MM-DD HH:mm:ss')
              : '',
            buildingdoorno: this.listQuery.buildingdoorno,
            floorno: this.listQuery.floorno,
            livingway: this.listQuery.livingway,
            startcause: this.listQuery.startcause,
            apartmentno: this.listQuery.apartmentno,
            rentflag: this.listQuery.rentflag,
            usetype: this.listQuery.usetype,
            stopdate: this.listQuery.stopdate
              ? dayjs(this.listQuery.stopdate).format('YYYY-MM-DD HH:mm:ss')
              : '',
            roomno: this.listQuery.roomno,
            roomflag: this.listQuery.roomflag,
            stopcause: this.listQuery.stopcause,
            changedate: this.listQuery.changedate
              ? dayjs(this.listQuery.changedate).format('YYYY-MM-DD HH:mm:ss')
              : '',
            changetype: this.listQuery.changetype,
            lenthWidth: this.listQuery.lenthWidth,
            buildingarea: this.listQuery.buildingarea,
            rentarea: this.listQuery.rentarea,
            usingarea: this.listQuery.usingarea,
            oldvalue: this.listQuery.oldvalue,
            nowvalue: this.listQuery.nowvalue,
            use: this.listQuery.use,
            usetype: this.listQuery.usetype,
            roommemo1: this.listQuery.roommemo1,
						singleuseflag:this.listQuery.singleuseflag,
            roomid: this.roomid ? this.roomid : -1
          }
          if (this.blockType == 2) {
            updRoom(data).then((res) => {
              this.$message(res.message)
              localStorage.setItem('roomid', this.roomid)
            })
          } else {
            addRoom(data).then((res) => {
              this.$message(res.message)
              localStorage.setItem('roomid', res.data.roomid)
            })
          }
        } else {
          return false
        }
      })
    },
    returns() {
      this.$router.go(-1)
    },
    // 选择类型
    selectButton(type) {
      this.type = type
    },
    blockChange(e) {
      this.blockid = e.blockid
      this.listQuery.blockno = e.blockno

      let data = {
        BlockID: this.blockid
      }
      blockDetail(data).then((res) => {
        this.listQuery.creatingdept = res.data.creatingdept
      })
    }
  },
  beforeDestroy() {
    let data = {
      blockno: this.listQuery.blockno,
      roomid: this.listQuery.roomid,
      creatingdept: this.listQuery.creatingdept,
      startdate: this.listQuery.startdate
        ? dayjs(this.listQuery.startdate).format('YYYY-MM-DD HH:mm:ss')
        : '',
      buildingdoorno: this.listQuery.buildingdoorno,
      floorno: this.listQuery.floorno,
      livingway: this.listQuery.livingway,
      startcause: this.listQuery.startcause,
      apartmentno: this.listQuery.apartmentno,
      rentflag: this.listQuery.rentflag,
      usetype: this.listQuery.usetype,
      stopdate: this.listQuery.stopdate
        ? dayjs(this.listQuery.stopdate).format('YYYY-MM-DD HH:mm:ss')
        : '',
      roomno: this.listQuery.roomno,
      roomflag: this.listQuery.roomflag,
      stopcause: this.listQuery.stopcause,
      changedate: this.listQuery.changedate
        ? dayjs(this.listQuery.changedate).format('YYYY-MM-DD HH:mm:ss')
        : '',
      changetype: this.listQuery.changetype,
      lenthWidth: this.listQuery.lenthWidth,
      buildingarea: this.listQuery.buildingarea,
      rentarea: this.listQuery.rentarea,
      usingarea: this.listQuery.usingarea,
      oldvalue: this.listQuery.oldvalue,
      nowvalue: this.listQuery.nowvalue,
      use: this.listQuery.use,
      usetype: this.listQuery.usetype,
      roommemo1: this.listQuery.roommemo1
    }
    localStorage.setItem('jibenxinxi', JSON.stringify(data))
  }
}
</script>

<style scoped>
.headTop {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .xinxi {
    display: flex;
    width: 800px;
  }
}

.el-form-item {
  justify-content: start !important;
}

.el-select {
  width: 180px;
}

.el-input {
  width: 180px;
}

.el-date-picker {
  width: 180px;
}

.bottomTop {
  width: 100%;
  display: flex;
  justify-content: end;
}

.tabButton {
  background: #eff2f7;
  color: #333333;
  border: none;
}
.publicformview-row {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
/deep/ .el-form-item--mini {
  width: unset;
}
</style>